/**
 * Created by shc@lierda.com on 2017/2/22.
 */
var React = require('react');

var Header = require('../widget/Header');
var Footer = require('../widget/Footer');
var Pingpai = require('../widget/Pingpai');
var Active = require('../components/Active');
var MsgBox = require('../components/MsgBox');
var ajax=require('../tools/ajax');

module.exports = React.createClass({
    getInitialState: function () {
        this.itemsChanged = false;
        return {
            theme:"Default", //Default/Blue
            category:[],//分类
        }
    },

    myScroll:"",

    componentDidMount: function () {
        this.getCategory();
    },
    componentDidUpdate() {
        setTimeout(this.feileiScroll,800);
    },
    /**修改购物车数量*/
    fleshNum:function(){
        this.refs.Header.fleshNum();
    },
    feileiScroll(){
        var p =this;
        p.myScroll = new IScroll("#feileiScroll",{
            // 默认iscroll会拦截元素的默认事件处理函数，我们需要响应onClick，因此要配置
            preventDefault: false,
            // 禁止缩放
            zoom: false,
            // 支持鼠标事件，因为我开发是PC鼠标模拟的
            mouseWheel: true,
            // 滚动事件的探测灵敏度，1-3，越高越灵敏，兼容性越好，性能越差
            probeType: 3,
            // 拖拽超过上下界后出现弹射动画效果，用于实现下拉/上拉刷新
            bounce: true,
            // 展示滚动条
            scrollbars: false
        });
        p.myScroll.on("scroll", p.onScroll);
        p.myScroll.on("scrollEnd", p.onScrollEnd);
    },
    onScroll() {
        // 下拉区域
        if (this.myScroll.y <= this.myScroll.maxScrollY + 5) {
            this.onPullUp();
        }
    },
    onScrollEnd() {
        var p=this;
        // 滑动结束后，停在加载区域
        if (p.myScroll.y <= p.myScroll.maxScrollY) {
            // 发起了加载，那么更新状态
            //if (p.state.pullUpStatus == 0) {
            //    p.setState({pullUpStatus: 3});
            //}
            var limit = p.state.limit;
            limit = limit + 2;
            //p.setState({limit:limit,pullUpFlag:true},()=>{
            //    p.itemsChanged = true;
            //    setTimeout(function(){
            //        p.getCateproinfo(limit);
            //    },1500);
            //});
        }
    },
    getCategory(){
        var p=this;
        ajax("POST","getProductCate",{},function(dt){
            if(dt && dt.success){
                var objs = dt.data;
                console.log(objs);
                p.setState({category:objs});
            }
        });
    },
    /**功能列表跳转*/
    banner(e){
        var p=this;
        var id = e.currentTarget.getAttribute("data");
        location.href = "#shop_pro/1/"+id;
        localStorage.setItem("back", "#fenlei");
    },
    action(e){
        var action = e.currentTarget.getAttribute("action");
        location.href = action;
    },
    render: function () {
        var p = this;
        var categoryList = p.state.category.map(function(obj,index){
            return(
                <div key={index} className="mf-t fenlei" onClick={p.banner} data={obj.id}>
                    <img src={obj.picurl} style={{width:"1.9rem",height:"1.9rem"}}/>
                    <div className="ft-s">{obj.cat_name}</div>
                </div>
            )
        });
        return (
            <div className="main"  id="main">
                <div id="feileiScroll" ref="fenleiWrap" className="container-t wrap fenlei">
                    <div style={{minHeight:"31rem"}}>
                        <div className="search">
                            <img src="http://115.29.198.39:8080/upload/cw_otherbanner/10396760182072928.png" />
                            <div type="text" className="searchBtn" onClick={p.action} action="#searchGoods"></div>
                        </div>
                        <div className="mainFunction">
                            {categoryList}
                        </div>
                        <div className="mainHead">
                            <div className="h1">
                                <span>猜你喜欢</span>
                            </div>
                            <Active ></Active>
                        </div>
                    </div>
                </div>
                <MsgBox ref="MsgBox"></MsgBox>
                <Footer witchSelected="fenlei"></Footer>
            </div>
        )
    }
});
